<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic</title>
  <link rel="shortcut icon" href="http://sennajs.com/images/favicon.ico">

  <script src="https://cdn.jsdelivr.net/requirejs/2.1.22/require.js"></script>
</head>
<body>
  <div id="header">
      Header default <a href="foo.html">Foo</a>
  </div>
  <div id="content">
     Content default <a href="index.html">Index</a>
  </div>
  <div id="footer">
    This is a footer static content.
    <div id="footer-default">
      This is a footer dynamic content from index.html.
    </div>
  </div>
  <div id="indexOnlySurface">
     Always show default content since it's only present on index.html.
  </div>

  <!-- Initializing Senna -->
  <script>
    requirejs.config({
      baseUrl: '../../build/amd'
    });

    requirejs(['senna/src/senna'], function(senna) {
      console.log('Senna version:', senna.version);
      var app = new senna.App();
      app.setBasePath('/examples/amd');
      app.addSurfaces(['header', 'content', 'footer', 'indexOnlySurface']);
      app.addRoutes([
        {
          path: '/index.html',
          handler: senna.HtmlScreen
        },
        {
          path: '/foo.html',
          handler: senna.HtmlScreen
        }
      ]);
    });
  </script>
</body>
</html>
